import { Component } from 'react'

class Left extends Component {
  state = {
    number: '',
    name: '',
    sex: '女',
    age: '',
    college: '大前端',
    hobbies: [
      {id: 0, title: '足球', isChecked: false},
      {id: 1, title: '篮球', isChecked: false},
      {id: 2, title: '橄榄球', isChecked: false},
    ]
  }

  rawData = JSON.parse(JSON.stringify(this.state))

  changeState = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  changeCollege = (id, e) => {
    const hobbies = JSON.parse(JSON.stringify(this.state.hobbies))
    hobbies[id].isChecked = e.target.checked
    this.setState({hobbies})
  }

  submit = (ev) => {
    ev.preventDefault()
    console.log(ev)
    let hobbies = JSON.parse(JSON.stringify(this.state.hobbies))
    hobbies = hobbies.filter( hobbies => hobbies.isChecked).map(hobbies => hobbies.title)
    this.props.add({...this.state,hobbies},() => this.setState(this.rowData))//回调函数恢复默认数据
  }

  render() {
    return (
      <div className="col-md-5">
          <form onSubmit={this.submit}>
            <div className="form-group">
              <label>学号</label>
              {/* 使用name获取对应的数据名，绑定数据，添加onchange方法  下面同理 */}
              <input name='number' type="number" className="form-control" placeholder="请输入学号" value={this.state.number} onChange={this.changeState} />
            </div>
            <div className="form-group">
              <label>姓名</label>
              <input name='name' type="text" className="form-control" placeholder="请输入姓名" value={this.state.name} onChange={this.changeState} />
            </div>
            <div className="form-group">
              <label>性别&nbsp;&nbsp;</label>
              <label className="checkbox-inline">
                <input name='sex' type="radio" value="男" checked={this.state.sex === '男'} onChange={this.changeState}/> 男
              </label>
              <label className="checkbox-inline">
                <input name='sex' type="radio" value="女" checked={this.state.sex === '女'} onChange={this.changeState}/> 女
              </label>
            </div>
            <div className="form-group">
              <label>年龄</label>
              <input name='age' type="text" className="form-control" placeholder="请输入年龄" value={this.state.age} onChange={this.changeState}/>
            </div>
            {/* 爱好复选框和前面有区别，但基本逻辑相同 */}
            <div className="form-group">
              <label>爱好</label>
              {this.state.hobbies.map(hobbies => {
                return (
                  <div className="checkbox" key={hobbies.id}>
                    <label>
                      <input type="checkbox" value={hobbies.title} onChange={this.changeCollege.bind(this, hobbies.id)} checked={hobbies.isChecked}/> {hobbies.title}
                    </label>
                  </div>
                )
              })}
            </div>
            <div className="form-group">
              <label>所属学院</label>
              <select name='college' className="form-control" value={this.state.college} onChange={this.changeState}>
                <option value="大前端">大前端</option>
                <option value="Java">Java</option>
                <option value="python">python</option>
              </select>
            </div>
            <button type="submit" className="btn btn-default">添加</button>
          </form>
      </div>
    )
  }
}
export default Left